<script lang="ts" setup>
import type { StateType } from './types';

import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { $t } from '@vben/locales';
import { Page,z } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';

import { useTitle } from '@vueuse/core';
import {
  Card,
  message,
  
} from 'ant-design-vue';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';

import { useVbenForm } from '#/adapter/form';
import { getPageInfo_video, postPage_video } from '#/api/portal/home';
import { usePreferencesStore } from '#/store';

const route = useRoute();

const { setTabTitle, closeCurrentTab } = useTabs();


const router = useRouter();

const routeMeta = router.currentRoute.value.meta;
const routeTitle = routeMeta.title.replace('管理', '');
const preferencesStore = usePreferencesStore();
const { title } = storeToRefs(preferencesStore);




const disabled = ref(true);
const activeKey = ref('1');
const state: StateType = reactive({
  form: {
    video: '',
    name: '',   
  },
  pageThemeFiles: [],
});

const [BasicForm, BasicFormApi] = useVbenForm({
  handleSubmit: onSubmit,
  resetButtonOptions: {
    show: false,
  },
  schema: [
    {
      component: 'Input',
      dependencies: {
        show: false,
        // 随意一个字段改变时，都会触发
        triggerFields: ['id'],
      },
      fieldName: 'id',
      label: 'ID',
    
    },
    {
      component: 'Input',
      defaultValue: '',
      dependencies: {
        trigger: (values) => {
          disabled.name = !values.name;

          state.form.video = values.video;
          state.form.name = values.name;
        
        },
        // 随意一个字段改变时，都会触发
        triggerFields: [
          'id',

          'video',
          'name'
        ],
      },
      componentProps: {
        placeholder: $t('page.common.Please Enter')+' ('+$t('admin.maxChars', { length: 50 })+'）',
      },
      fieldName: 'name',
      label: `${routeTitle} `+$t('page.common.Title'),
       rules: z.string().max(50,$t('admin.maxChars', { length: 50 })),
    },

 
    {
      component: 'Upload',
      defaultValue: '',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
        type:'video',
        tips:$t('admin.maxSize', { size: '50M' })
      },
      fieldName: 'video',
      label: `${routeTitle}`,
    },
     

       
  ],
});



async function onSubmit() {
  function showMsg(msg: string) {
    message.success(msg);
   
      
  }
  const values: any = state.form;

     const { msg } = await postPage_video(values);
    showMsg(msg);
}
async function onGetPage() {
  const { data } = await getPageInfo_video();
  data.post = {
    id: data?.id ?? undefined,
    video: data?.video ?? '',
    name: data?.name ?? '',

  };
  
  state.form = data.post;
  BasicFormApi.setValues({ ...state.form});
  state.pageThemeFiles = data.pageThemeFiles;
}

onMounted(async () => {
  await onGetPage();
  
});




</script>

<template>
  <Page>
    <Card :title="`${routeTitle} `+$t('page.common.Details')">
      <BasicForm/>
    </Card>
  </Page>
</template>
